/* eslint-disable import/order */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Tabs } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import router from 'umi/router';
import styles from '@/utils/utils.less';
import SocialWare from './SocialWare';
import AccuWare from './AccuWare';
import InjuryWare from './InjuryWare';
import { checkPermissions } from '@/utils/authority';

const { TabPane } = Tabs;

@connect(({ bigaccomanage }) => ({
  activeKey: bigaccomanage.activeKey,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tabList: checkPermissions('business:injSecAccoApi:pageList')
        ? [
            { itemCode: 'social', itemName: '社保' },
            { itemCode: 'accu', itemName: '公积金' },
            { itemCode: 'injury', itemName: '工伤二级户' },
          ]
        : [{ itemCode: 'social', itemName: '社保' }, { itemCode: 'accu', itemName: '公积金' }],
    };
  }

  componentDidMount() {
    // const getFieldsList = form.getFieldsValue();
    const {
      dispatch,
      location: {
        query: { activeKey, isMenuLink },
      },
      location,
    } = this.props;
    dispatch({
      type: 'bigaccomanage/updateModelData',
      payload: {
        activeKey,
      },
    });
    if (isMenuLink === 'true') {
      this.resetAndGeLlist(location);
    }
  }

  // 切换页签
  changeTabPane = activeKey => {
    const {
      dispatch,
      location: { pathname },
    } = this.props;
    router.push(`${pathname}?activeKey=${activeKey}`);
    // 更改当前models里面state的数据
    dispatch({
      type: 'bigaccomanage/updateModelData',
      payload: {
        activeKey,
        selectedRowKeys: [],
        selectedRows: [],
        // formFieldsValue: {},
        // expandForm: false,
      },
    });
  };

  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'bigaccomanage/updateModelData',
      payload: { formFieldsValue: {} },
    });
    dispatch({
      type: 'accuware/updateModelData',
      payload: { formFieldsValue: {} },
    });
    dispatch({
      type: 'injuryware/updateModelData',
      payload: { formFieldsValue: {} },
    });
    form.resetFields();
  };

  getTabPane = key => {
    switch (key) {
      case 'social':
        return <SocialWare {...this.props} resetSearch={this.resetSearch} />;
      case 'accu':
        return <AccuWare {...this.props} />;
      case 'injury':
        return <InjuryWare {...this.props} />;
      default:
        return <div />;
    }
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    await this.resetSearch();
    // await this.getList();
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const { activeKey } = this.props;
    const { tabList } = this.state;

    return (
      <PageHeaderWrapper>
        <Card className={styles.tabCard}>
          <Tabs activeKey={activeKey || 'social'} onChange={this.changeTabPane}>
            {tabList.map(pane => (
              <TabPane key={pane.itemCode} tab={pane.itemName}>
                {this.getTabPane(pane.itemCode)}
              </TabPane>
            ))}
          </Tabs>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
